/**
 * Created by jijin on 2017/7/8.
 */
import React, { Component } from 'react';
import {
  View,
  Text,
  TouchableNativeFeedback
} from 'react-native';
import Ionicon from 'react-native-vector-icons/Ionicons';
import Menu from "../components/menu/index";
import Articles from '../pages/articles';
import Projects from '../pages/projects';
import About from '../pages/about';

export default class Layout extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      userInfo: null,
    }
  }

  render() {
    let itemId = 0;
    let androidIconSize = 18;
    let iosIconSize = 30;
    let {navigator} = this.props;
    let userInfo = this.state.userInfo;

    return (
      <Menu
        initialEntry={0}
        userInfo={userInfo}
        entries={[
          {
            id: itemId++,
            title: 'Home',
            element: <Articles navigator={navigator} title="SURMON.ME"/>,
            androidIcon: <Ionicon name="md-home" size={androidIconSize}/>,
            androidBackground: TouchableNativeFeedback.Ripple ? TouchableNativeFeedback.Ripple('grey', false) : null,
            itemComponent: Ionicon.TabBarItem,
            iconName: 'ios-home-outline',
            selectedIconName: 'ios-home',
            iconSize: iosIconSize,
          },
          {
            id: itemId++,
            title: 'Projects',
            element: <Projects navigator={navigator} title="Projects"/>,
            androidIcon: <Ionicon name="logo-github" size={androidIconSize}/>,
            androidBackground: TouchableNativeFeedback.Ripple ? TouchableNativeFeedback.Ripple('grey', false) : null,
            itemComponent: Ionicon.TabBarItem,
            iconName: 'logo-github',
            selectedIconName: 'logo-github',
            iconSize: iosIconSize,
          },
          {
            id: itemId++,
            title: 'About Me',
            element: <About navigator={navigator} title="About Me"/>,
            androidIcon: <Ionicon name="md-person" size={androidIconSize}/>,
            androidBackground: TouchableNativeFeedback.Ripple ? TouchableNativeFeedback.Ripple('grey', false) : null,
            itemComponent: Ionicon.TabBarItem,
            iconName: 'ios-person-outline',
            selectedIconName: 'ios-person',
            iconSize: iosIconSize,
          }
        ]}
      />
    )
  }
}